<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="/usercp/style/admin.css" media="all">
  </head>
  <body>
    <div class="m-site-framebody">
      站点信息
      <hr>
      <div class="layui-form" lay-filter="setting">
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">站点名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">所属客户</label>
          <div class="layui-inline" style="width: 148px;">
                <select name="custom_id" lay-filter="custom" required lay-verify="required" lay-search>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">站点类型</label>
          <div class="layui-input-block">
              <input type="checkbox" name="app_type[]" lay-filter="app_type" value="baidu"  title="百度小程序" checked>
          </div>
        </div>
        小程序配置
        <hr>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
              <ul class="layui-tab-title">
                <li class="layui-this">百度小程序配置</li>
              </ul>
              <div class="layui-tab-content">
                <div class="layui-form-item">
                <label class="layui-form-label">AppId</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input type="text" name="appid" required lay-verify="required" placeholder="请输入AppId" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">App Key</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input type="text" name="app_key" required lay-verify="required" placeholder="请输入App Key" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">App Secret</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input type="text" name="app_secret" required lay-verify="required" placeholder="请输入App Secret" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
        </div>
        模板选择
        <hr>
        <ul class="layui-tab-title" style="margin-bottom: 20px;">
            <li class="layui-this" data-value="baidu">百度小程序模板</li>
        </ul>
        <div class="layui-fluid layadmin-cmdlist-fluid">
            <div class="layui-row layui-col-space30">
              <input type="hidden" name="style_id" value="">
              {foreach $templates as $template}
              <div class="layui-col-md2 layui-col-sm4">
                  <div class="cmdlist-container">
                      <img src="{$template['imgs']}">
                        <div class="info">{$template['title']}</div>
                        <div class="tplmsk">
                            <a class="tplbtn" data-typeid="{$template['id']}" data-type="baidu" href="javascript:;" >选择模板</a>
                        </div>
                  </div>
                </div>
                {/foreach}
          </div>
        </div>
        计费信息  
        <hr>
        <div class="layui-form-item" >
          <label class="layui-form-label">计费方式</label>
          <div class="layui-inline" style="width: 88px;display: none;" id="number">
            <div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
              <input type="text" name="number" id="number_input" placeholder="开通时长" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline" style="width: 148px;">
            <select name="type" id="type" lay-filter="type">
              <option value="forever">永久</option>
              <option value="year">年</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">应付金额</label>
          <div class="layui-input-block">
            <input type="text" name="fee" id="fee" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">可用余额</label>
          <div class="layui-input-block">
            <input type="text" name="balance" id="balance" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="form">立即提交</button>
                <button type="reset" id="reset_form" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>  
      </div>
    </div>
    <style>
      html {
        background-color: #fff;
      }
      .m-site-framebody {
        padding: 10px 15px;
      }
      .m-site-framebody-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        font-size: 14px;
        border-bottom: 1px solid #e6e6e6;
      }
      .layui-table, .layui-table-view {
        margin: 0;
      }
      .layui-col-sm4 {
        text-align: center;
        position: relative;
        margin:10px;
        border-radius: 4px;
        box-sizing: border-box;
        border: 2px solid #ffffff;
      }
      .cmdlist-container img{
        width: 70%;
        height: 70%;
        position: relative;
        margin: 15px auto 20px auto;
      }
      .tplmsk {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;
      }
      .tplbtn {
        position: relative;
        left: 0;
        top:50%;
        color: white;
        padding: 8px 20px;
        border: 2px solid #ffffff;
        border-radius: 4px;
        display: inline-block;
        cursor:pointer;
      }
      .info {
        font-weight: bold;
        height: 40px;
        line-height: 44px;
        text-align: center;
      }
      .selected {
        border: 2px solid rgb(220, 20, 60);
      }
      .layui-col-sm4:hover .tplmsk{
        display: block;
      }
    </style>
    <script src="/usercp/layui/layui.js"></script>
    <script>
    layui.use(['form'], function(){
        var form = layui.form;
        var $ = layui.$;

        //选择模板
        $('.tplbtn').click(function(){
          $(".tplmsk").removeAttr("style");
          $(this).parents('.layui-col-sm4').siblings().removeClass('selected');
          $(this).parents('.layui-col-sm4').addClass('selected');
          $(this).parents('.layui-col-sm4 .tplmsk').hide();
          var type_id = $(this).data('typeid');
          $('input[name="style_id"]').val(type_id);
        })
        
        $.get('/usercp/site/custom_lists', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                      $html += "<option value='" + item.current_id + "'>" + item.username + "</option>";
                    });
                $("select[name='custom_id']").append($html);
                //append后必须从新渲染
                form.render('select');
             }
        })
        get_fee('forever');
        form.on('select(type)', function(data){
            var number_choose = document.getElementById("number");
            if(data.value == 'year' || data.value == 'quarter' || data.value == 'month'){
                number_choose.style.display = '';
                $('#number_input').attr('lay-verify','required|number');
                if($('#number_input').val() != ''){
                    get_fee(data.value,$('#number_input').val())
                }
            }else{
                number_choose.style.display = 'none';
                $('#number_input').removeAttr('lay-verify');
                get_fee(data.value)
            }
        }); 

        $('#number_input').keyup(function(){
            var number_input = $('#number_input').val();
            var type_select = $('#type').val();
            get_fee(type_select,number_input)
        })

        function get_fee(type,value){
            value = parseInt(value);
            if(type != 'forever' && (isNaN(value) || !value)){
                $('#fee').val(0);
                form.render('select');
                return false;
            }
            $.get('/usercp/site/get_create_fee', {'type':type,'number':value}, function (data) {
                if(data.data != null){
                    $('#fee').val(data.data.fee);
                    $('#balance').val(data.data.balance)
                    form.render('select');
                 }
            })      
        }
        
        // 监听提交，测试用例
        form.on('submit(form)', function(data){
          var field = data.field;

          if (field.style_id == '' || field.style_id == null){
              layer.msg('请选择模板', {
                offset: '50px'
                ,icon: 2
                ,anim: 6
                ,time: 1000
              }, function(){});
              return false;
          }
          $.ajax({
                  url: '/usercp/site/new',
                  type: "POST",
                  data: field,
                  dataType: 'json',
                  success: function (res) {
                    if (res.code == 0){
                        layer.msg(res.msg, {
                          offset: '50px'
                          ,icon: 2
                          ,anim: 6
                          ,time: 1000
                        }, function(){});
                        return false;
                      }else{
                        layer.msg('创建成功！', {
                          offset: '15px'
                          ,icon: 1
                          ,time: 1000
                        }, function(){
                          location.href = '/usercp/site/index';
                        });
                    }
                    return false;
                  }
              })
        });
    });
    </script>
  </body>
</html>
